import { useState, useEffect } from "react";
import { Link, routerRedux } from "dva/router";
import { connect } from "dva";
import { Flex, Tag, Icon, NavBar } from "antd-mobile";
import style from "./index.css";
const QueryDetail = ({ content, dispatch }) => {
  const { queryListDe } = content;
  const [List, setList] = useState(queryListDe);
  useEffect(() => {
    setList(queryListDe);
  }, [queryListDe]);
  const getDetail = (id) => {
    dispatch(routerRedux.push("/detail"));
    dispatch({
      type: "content/save",
      payload: {
        proid: id,
        proDetail: {},
        backflag:2
      },
    });
  };

  return (
    <div>
      <NavBar
        style={{
          position: "fixed",
          top: "0",
          left: "0",
          width: "100%",
          zIndex: "100",
        }}
        mode="light"
        leftContent={[
          <Link to="/query" key="1">
            <Icon type="left" />
          </Link>,
        ]}
      >
        商品搜索
      </NavBar>
      <div style={{ padding: "50px 3vw 10px" }}>
        <Flex wrap="wrap" justify="between" align="start">
          {List
            ? List.map((item, index) => {
                return (
                  <div
                    key={index}
                    className={style.inline}
                    onClick={() => getDetail(item.id)}
                  >
                    <div className={style.discon}>
                      <img src={item.cover} alt="" className={style.disimg} />
                    </div>
                    <div
                      style={{
                        fontSize: "13px",
                        lineHeight: "18px",
                        height: "36px",
                        overflow: "hidden",
                      }}
                    >
                      <Tag style={{ marginRight: "5px" }} small>
                        名称
                      </Tag>
                      {item.name}
                    </div>
                    <div style={{ marginTop: "4px" }}>
                      <span style={{ fontSize: "14px", color: "red" }}>
                        ¥{item.price_origin}
                      </span>
                      {item.promotions.length>0?(<Tag
                        style={{
                          float: "right",
                          paddingRight: "5px",
                          color: "red",
                          background: "#f8c9cb",
                        }}
                        small
                      >
                        {item.promotions[0]["label"]}
                      </Tag>):""}
                    </div>
                  </div>
                );
              })
            : ""}
        </Flex>
      </div>
    </div>
  );
};
export default connect(({ content }) => ({ content }))(QueryDetail);
